<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银发云端安梦老-智能连心梧桐栖</title>
    <link rel="stylesheet" href="assets/css/tailwind.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"
        integrity="sha512-7x3zila4t2qNycrtZ31HO0NnJr8kg2VI67YLoRSyi9hGhRN66FHYWr7Axa9Y1J9tGYHVBPqIjSE1ogHrJTz51g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>

<body class="font-body">

    <!-- home section -->
    <section class="bg-white py-10 md:mb-10">

        <div class="container max-w-screen-xl mx-auto px-4">

            <nav class="flex-wrap lg:flex items-center" x-data="{navbarOpen:false}">
                <div class="flex items-center mb-10 lg:mb-0">
                    <img src="assets/image/footer-logo.png" alt="Logo" class="Blogo">

                    <button
                        class="lg:hidden w-10 h-10 ml-auto flex items-center justify-center border border-blue-500 text-blue-500 rounded-md"
                        @click="navbarOpen = !navbarOpen">
                        <i data-feather="menu"></i>
                    </button>
                </div>

                <ul class="lg:flex flex-col lg:flex-row lg:items-center lg:mx-auto lg:space-x-8 xl:space-x-14"
                    :class="{'hidden':!navbarOpen,'flex':navbarOpen}">

                    <li
                        class="font-semibold text-gray-900 hover:text-gray-400 transition ease-in-out duration-300 mb-5 lg:mb-0">
                        <a href="#">主页</a>
                    </li>
                    <li
                        class="font-semibold text-gray-900 hover:text-gray-400 transition ease-in-out duration-300 mb-5 lg:mb-0">
                        <a href="#">预约服务</a>
                        <!-- 当鼠标移入预约服务时，存在下拉列表，里面有预约服务的选项 -->
                        <ul class="formhidden">
                            <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">生活服务</a></li>
                            <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">社交娱乐</a></li>
                            <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">安全监控</a></li>
                            <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">健康管理</a></li>
                        </ul>
                    </li>
                    <li
                        class="font-semibold text-gray-900 hover:text-gray-400 transition ease-in-out duration-300 mb-5 lg:mb-0">
                        <a href="#">会员服务中心</a>
                    </li>
                    <li
                        class="font-semibold text-gray-900 hover:text-gray-400 transition ease-in-out duration-300 mb-5 lg:mb-0">
                        <a href="#">关于我们</a>
                    </li>
                </ul>

                <div class="lg:flex flex-col md:flex-row md:items-center text-center md:space-x-6"
                    :class="{'hidden':!navbarOpen,'flex':navbarOpen}">
                    <a href="#"
                        class="px-6 py-4 bg-blue-500 text-white font-semibold text-lg rounded-xl hover:bg-blue-700 transition ease-in-out duration-500 mb-5 md:mb-0">登录</a>

                    <a href="#"
                        class="px-6 py-4 border-2 border-blue-500 text-blue-500 font-semibold text-lg rounded-xl hover:bg-blue-700 hover:text-white transition ease-linear duration-500">
                        建议信箱</a>
                        <a href="#"
                            class="age-mode-button">
                            老龄模式切换</a>
                </div>
            </nav>

            <div class="flex flex-col lg:flex-row justify-between space-x-20">
                <div class="text-center lg:text-left mt-40">
                    <h1 class="font-semibold text-gray-900 text-3xl md:text-6xl leading-normal mb-6">梧桐栖
                        <br> 心之安处
                    </h1>

                    <p class="font-light text-gray-400 text-md md:text-lg leading-normal mb-12">AI赋能 • 透明服务 • 全天候守护</p>

                    <button
                        class="px-6 py-4 bg-info font-semibold text-white text-lg rounded-xl hover:bg-blue-700 transition ease-in-out duration-500">了解我们</button>
                </div>

                <div class="mt-24">
                    <img src="assets/image/home-img.png" alt="Image">
                </div>
            </div>

        </div> <!-- container.// -->

    </section>
    <!-- home section //end -->

    <!-- feature section -->
    <section class="bg-white py-16 md:mt-10">

        <div class="container max-w-screen-xl mx-auto px-4">

            <p class="font-light text-gray-500 text-lg md:text-xl text-center uppercase mb-6">平台核心</p>

            <h1 class="font-semibold text-gray-900 text-xl md:text-4xl text-center leading-normal mb-10">“银发云端”以技术为纽带，重塑养老服务价值链。我们致力于成为智慧养老领域的领跑者，让每位老人“老有所依，老有所乐”</h1>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-20">
                <div class="text-center">
                    <div class="flex justify-center mb-6">
                        <div class="w-20 py-6 flex justify-center bg-blue-200 bg-opacity-30 text-blue-700 rounded-xl">
                            <i data-feather="globe"></i>
                        </div>
                    </div>

                    <h4 class="font-semibold text-lg md:text-2xl text-gray-900 mb-6">全程透明化</h4>

                    <p class="font-light text-gray-500 text-md md:text-xl mb-6">服务期间，护工人员全程佩戴微型摄像头，可以供家属实时留意，保障了服务的高质量高水平</p>
                    <div class="flex justify-center">
                        <a href="#"
                            class="flex items-center gap-5 px-6 py-4 font-semibold text-info text-lg rounded-xl hover:bg-info hover:text-white transition ease-linear duration-500">
                            了解更多
                            <i data-feather="chevron-right"></i>
                        </a>
                    </div>
                </div>

                <div class="text-center">
                    <div class="flex justify-center mb-6">
                        <div class="w-20 py-6 flex justify-center bg-blue-200 bg-opacity-30 text-blue-700 rounded-xl">
                            <i data-feather="arrow-up-right"></i>
                        </div>
                    </div>

                    <h4 class="font-semibold text-lg md:text-2xl text-gray-900 mb-6">AI算法融合应用</h4>

                    <p class="font-light text-gray-500 text-md md:text-xl mb-6">1.精准资源匹配：智能算法优化服务流程，降低家庭经济与时间成本
                    2.智能检测算法：在健康档案分析中，可通过可穿戴设备监测心率异常、跌倒检测、慢性病预警</p>

                    <div class="flex justify-center">
                        <a href="#"
                            class="flex items-center gap-5 px-6 py-4 font-semibold text-info text-lg rounded-xl hover:bg-info hover:text-white transition ease-linear duration-500">
                            了解更多
                            <i data-feather="chevron-right"></i>
                        </a>
                    </div>
                </div>

                <div class="text-center">
                    <div class="flex justify-center mb-6">
                        <div class="w-20 py-6 flex justify-center bg-blue-200 bg-opacity-30 text-blue-700 rounded-xl">
                            <i data-feather="clock"></i>
                        </div>
                    </div>

                    <h4 class="font-semibold text-lg md:text-2xl text-gray-900 mb-6">居家上门服务</h4>

                    <p class="font-light text-gray-500 text-md md:text-xl mb-6">居家舒适养老:平台根据老人的个人健康档案提供个性化的推荐和服务派遣专业的护理人员上门服务，服务包含私人护理、居家康复、心理疏导等</p>

                    <div class="flex justify-center">
                        <a href="#"
                            class="flex items-center gap-5 px-6 py-4 font-semibold text-info text-lg rounded-xl hover:bg-info hover:text-white transition ease-linear duration-500">
                            了解更多
                            <i data-feather="chevron-right"></i>
                        </a>
                    </div>
                </div>
            </div>

        </div> <!-- container.// -->

    </section>
    <!-- feature section //end -->

    <!-- donation section -->
    <section class="bg-white py-16">

        <div class="container max-w-screen-xl mx-auto px-4">

            <h1 class="font-semibold text-gray-900 text-xl md:text-4xl text-center mb-16">服务细节</h1>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                <div class="px-6 py-6 w-full border-2 border-gray-200 rounded-3xl">
                    <img src="assets/image/donation-1.png" alt="Image"
                        class="mb-6 hover:opacity-75 transition ease-in-out duration-500">

                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl mb-6">服务质量监控与透明公示 <br>
                        </h4>

                    <p class="font-light text-gray-400 text-sm md:text-md lg:text-lg mb-10">护理人员凭证上岗在服务期间全程透明化，平台也会通过定期的质量监控和审核，确保所有服务提供者(如护理人员、医师等)的资质和服务质量合格。并在平台上公示服务质量、顾客满意度等数据，增强透明度和信任感。</p>

                    <div class="flex items-center justify-between mb-8">
                        <h6 class="font-light text-gray-400 text-sm md:text-lg">医疗护理人员： <span
                                class="font-semibold text-gray-900 text-md md:text-lg">300</span></h6>

                        <h6 class="font-light text-gray-400 text-sm md:text-lg">服务中： <span
                                class="font-semibold text-gray-900 text-md md:text-lg">250</span></h6>
                    </div>

                    <div class="hidden md:block lg:flex items-center justify-between mb-8">
                        <div>
                            <div class="w-72 h-2 bg-info opacity-10 rounded-lg absolute"></div>

                            <div class="w-56 h-2 bg-info rounded-lg relative"></div>
                        </div>

                        <p class="font-light text-gray-900 text-md">84%</p>
                    </div>

                    <button
                        class="w-full py-4 bg-info font-semibold text-white text-lg rounded-xl hover:bg-blue-800 transition ease-in-out duration-500">查看质量反馈</button>
                </div>

                <div class="px-6 py-6 w-full border-2 border-gray-200 rounded-3xl">
                    <img src="assets/image/donation-2.png" alt="Image"
                        class="mb-6 hover:opacity-75 transition ease-in-out duration-500">

                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl mb-6">居家舒适养老-护理员上门服务 <br>
                        </h4>

                    <p class="font-light text-gray-400 text-sm md:text-md lg:text-lg mb-10">平台根据老人的个人健康档案提供个性化的推荐和服务派遣专业的护理人员上门服务，服务包含私人护理、居家康复、心理疏导等，同时也能提供个性化的社交和娱乐内容，满足老年人在情感上的需求。
                        <br></p>

                    <div class="flex items-center justify-between mb-8">
                        <h6 class="font-light text-gray-400 text-sm md:text-lg">长期居家护理员：<span
                                class="font-semibold text-gray-900 text-md md:text-lg">400</span></h6>

                        <h6 class="font-light text-gray-400 text-sm md:text-lg">服务中：<span
                                class="font-semibold text-gray-900 text-md md:text-lg">280</span></h6>
                    </div>

                    <div class="hidden md:block lg:flex items-center justify-between mb-8">
                        <div>
                            <div class="w-72 h-2 bg-info opacity-10 rounded-lg absolute"></div>

                            <div class="w-52 h-2 bg-info rounded-lg relative"></div>
                        </div>

                        <p class="font-light text-gray-900 text-md">75%</p>
                    </div>

                    <button
                        class="w-full py-4 bg-info font-semibold text-white text-lg rounded-xl hover:bg-blue-800 transition ease-in-out duration-500">查看服务细节</button>
                </div>

                <div class="px-6 py-6 w-full border-2 border-gray-200 rounded-3xl">
                    <div class="carousel-container">
                        <!-- mb-6 hover:opacity-75 transition ease-in-out duration-500 -->
                    <img src="assets/image/donation-3.png" alt="Image 1"
                        class="carousel-image active">
                        <img src="assets/image/AI设备.png" alt="Image 2" class="carousel-image">
                        <img src="assets/image/AI设备2.png" alt="Image 3" class="carousel-image"></img>
                      </div>
                         
                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl mb-6"> <br>智能设备辅助养老，AI算法融合应用
                    </h4>

                    <p class="font-light text-gray-400 text-sm md:text-md lg:text-lg mb-10">建立个人健康档案，定期更新体检报告、病历记录等。<br>
                        平台提供智能健康监测设备（如智能手表、血糖仪、可穿戴设备等）；帮助老人实时监测健康状况并能自动将数据上传至平台，进行健康评估和提程、监测心率异常、跌倒检测、慢性病预警。  </p>

                    <div class="flex items-center justify-between mb-8">
                        <h6 class="font-light text-gray-400 text-sm md:text-lg">智能设备覆盖率：<span
                                class="font-semibold text-gray-900 text-md md:text-lg">80%</span></h6>

                        <h6 class="font-light text-gray-400 text-sm md:text-lg"> AI个人健康管理档案：<span
                                class="font-semibold text-gray-900 text-md md:text-lg">100%</span></h6>
                    </div>

                    <div class="hidden md:block lg:flex items-center justify-between mb-8">
                        <div>
                            <div class="w-72 h-2 bg-info opacity-10 rounded-lg absolute"></div>

                            <div class="w-60 h-2 bg-info rounded-lg relative"></div>
                        </div>

                        <p class="font-light text-gray-900 text-md">86%</p>
                    </div>

                    <button
                        class="w-full py-4 bg-info font-semibold text-white text-lg rounded-xl hover:bg-blue-800 transition ease-in-out duration-500">了解更多智能设备</button>
                </div>

                <div class="px-6 py-6 w-full border-2 border-gray-200 rounded-3xl">
                    <img src="assets/image/donation-4.png" alt="Image"
                        class="mb-6 hover:opacity-75 transition ease-in-out duration-500">

                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl mb-6">专业护理等级证书<br>
                    </h4>

                    <p class="font-light text-gray-400 text-sm md:text-md lg:text-lg mb-10">护工护理证——公司与政府合作推进的具有法律效率的衡量护工人员综合水平素质的资格证，统一了护工护理团队的人员水平标准统一化，为服务的高质量提供了强有力的保障。<br> </p>

                    <div class="flex items-center justify-between mb-8">
                        <h6 class="font-light text-gray-400 text-sm md:text-lg">在职培训人员： <span
                                class="font-semibold text-gray-900 text-md md:text-lg">1200</span></h6>

                        <h6 class="font-light text-gray-400 text-sm md:text-lg">持证通过人数： <span
                                class="font-semibold text-gray-900 text-md md:text-lg">720</span></h6>
                    </div>

                    <div class="hidden md:block lg:flex items-center justify-between mb-8">
                        <div>
                            <div class="w-72 h-2 bg-info opacity-10 rounded-lg absolute"></div>

                            <div class="w-48 h-2 bg-info rounded-lg relative"></div>
                        </div>

                        <p class="font-light text-gray-900 text-md">66%</p>
                    </div>

                    <button
                        class="w-full py-4 bg-info font-semibold text-white text-lg rounded-xl hover:bg-blue-800 transition ease-in-out duration-500">查看护理员资料</button>
                </div>

                <div class="px-6 py-6 w-full border-2 border-gray-200 rounded-3xl">
                    <img src="assets/image/donation-5.png" alt="Image"
                        class="mb-6 hover:opacity-75 transition ease-in-out duration-500">

                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl mb-6">全方位的服务生态链<br>
                        </h4>

                    <p class="font-light text-gray-400 text-sm md:text-md lg:text-lg mb-10">家庭服务与社区结合:平台不仅提供家庭护理、日常生活帮助等服务；对于线下养老社区的老人，平台则提供文化活动、运动康复、社交圈等丰富多样的体验。<br>服务涵盖基础生活照料、医疗护理服务，精神文化学习、娱乐社交、康复保健等领域 </p>

                    <div class="flex items-center justify-between mb-8">
                        <h6 class="font-light text-gray-400 text-sm md:text-lg">高级护理员：<span
                                class="font-semibold text-gray-900 text-md md:text-lg">250</span></h6>

                        <h6 class="font-light text-gray-400 text-sm md:text-lg">满意率：<span
                                class="font-semibold text-gray-900 text-md md:text-lg">90%</span></h6>
                    </div>

                    <div class="hidden md:block lg:flex items-center justify-between mb-8">
                        <div>
                            <div class="w-72 h-2 bg-info opacity-10 rounded-lg absolute"></div>

                            <div class="w-36 h-2 bg-info rounded-lg relative"></div>
                        </div>

                        <p class="font-light text-gray-900 text-md">50%</p>
                    </div>

                    <button
                        class="w-full py-4 bg-info font-semibold text-white text-lg rounded-xl hover:bg-blue-800 transition ease-in-out duration-500">了解更多服务</button>
                </div>

                <div class="px-6 py-6 w-full border-2 border-gray-200 rounded-3xl">
                    <img src="assets/image/donation-6.png" alt="Image"
                        class="mb-6 hover:opacity-75 transition ease-in-out duration-500">

                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl mb-6">社会价值闭环<br></h4>

                    <p class="font-light text-gray-400 text-sm md:text-md lg:text-lg mb-10">面向具有服务意识和相应能力的人（不考虑年龄）、具备专业知识的人、如就业难的毕业生、适龄老人（身体健朗，尚具备服务能力的中老年人）。<br> 整合闲置劳动力，推动"老有所为"</p>

                    <div class="flex items-center justify-between mb-8">
                        <h6 class="font-light text-gray-400 text-sm md:text-lg">老有所为倾向率<span
                                class="font-semibold text-gray-900 text-md md:text-lg">87.3%</span></h6>

                        <h6 class="font-light text-gray-400 text-sm md:text-lg">老领护理员占比率： <span
                                class="font-semibold text-gray-900 text-md md:text-lg">44.8%</span></h6>
                    </div>

                    <div class="hidden md:block lg:flex items-center justify-between mb-8">
                        <div>
                            <div class="w-72 h-2 bg-info opacity-10 rounded-lg absolute"></div>

                            <div class="w-20 h-2 bg-info rounded-lg relative"></div>
                        </div>

                        <p class="font-light text-gray-900 text-md">44.8%</p>
                    </div>

                    <button
                        class="w-full py-4 bg-info font-semibold text-white text-lg rounded-xl hover:bg-blue-800 transition ease-in-out duration-500">加入我们</button>
                </div>
            </div>

            <div class="flex items-center justify-center">
                <button
                    class="px-7 py-5 font-semibold bg-gray-100 text-gray-900 rounded-2xl hover:bg-gray-300 hover:text-gray-600 transition ease-in-out duration-500">了解更多</button>
            </div>

        </div> <!-- container.// -->

    </section>
    <!-- donation section //end -->

    <!-- feature section -->
    <section class="bg-white py-16">

        <div class="container max-w-screen-xl mx-auto px-4">

            <div class="flex flex-col lg:flex-row justify-between space-x-16">
                <div class="flex justify-center lg:justify-start">
                    <img src="assets/image/feature-img.png" alt="Image">
                </div>

                <div class="mt-16">
                    <h1 class="font-semibold text-gray-900 text-xl md:text-4xl mb-20">梧桐栖-银发云端-智能连心
                        <br> 为您提供健康、安全、舒适的养老服务<br>让我们透过屏幕走向您！</h1>
                        <br> 
                    </h1>

                    <div class="grid grid-cols-1 md:grid-cols-2 md:space-x-20 mb-16">
                        <div class="mb-5 md:mb-0">
                            <div class="w-20 py-6 flex justify-center bg-info bg-opacity-5 rounded-xl mb-4">
                                <i data-feather="sun" class="text-info"></i>
                            </div>

                            <h3 class="font-semibold text-gray-900 text-xl md:text-3xl mb-4">10000+</h3>

                            <p class="font-light text-gray-400 text-md md:text-lg">梧桐栖平台累计客户<br>老人及子女心之安处</p>
                            </p>
                        </div>

                        <div>
                            <div class="w-20 py-6 flex justify-center bg-red-500 bg-opacity-5 rounded-xl mb-4">
                                <i data-feather="award" class="text-red-500"></i>
                            </div>

                            <h3 class="font-semibold text-gray-900 text-xl md:text-3xl mb-4">奖赏证书</h3>

                            <p class="font-light text-gray-400 text-md md:text-lg">累计获得表彰过百<br>平台提供高水平，高标准、高专业度的养老护理员</p>
                               </p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 md:space-x-20">
                        <div class="mb-5 md:mb-0">
                            <div class="w-20 py-6 flex justify-center bg-yellow-500 bg-opacity-5 rounded-xl mb-4">
                                <i data-feather="users" class="text-yellow-500"></i>
                            </div>

                            <h3 class="font-semibold text-gray-900 text-xl md:text-3xl mb-4">梧桐栖护理员</h3>

                            <p class="font-light text-gray-400 text-md md:text-lg"> 平台护理员种类涵盖全面<br> 不同场景不同的护理员，满足不同层次需求
                            </p>
                        </div>

                        <div>
                            <div class="w-20 py-6 flex justify-center bg-green-500 bg-opacity-5 rounded-xl mb-4">
                                <i data-feather="trending-up" class="text-green-500"></i>
                            </div>

                            <h3 class="font-semibold text-gray-900 text-xl md:text-3xl mb-4">98%</h3>

                            <p class="font-light text-gray-400 text-md md:text-lg">满意度高达98%<br>积极正向反馈及支持来自千万名顾客</p>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- container.// -->

    </section>
    <!-- feature section //end -->

    <!-- join volunters section -->
    <section class="bg-white py-16">

        <div class="container max-w-screen-xl mx-auto px-4">

            <div class="w-full h-full bg-blue-500 rounded-2xl md:rounded-3xl relative lg:flex items-center">
                <div class="hidden lg:block">
                    <img src="assets/image/humans.png" alt="Image" class="relative z-10">

                    <img src="assets/image/pattern-2.png" alt="Image" class="absolute top-14 left-40">

                    <img src="assets/image/pattern.png" alt="Image" class="absolute top-0 z-0">
                </div>

                <div class="lg:relative py-4 lg:py-0">
                    <h1
                        class="font-semibold text-white text-xl md:text-4xl text-center lg:text-left leading-normal md:mb-5 lg:mb-10">
                        加入我们？或提出您宝贵的意见？<br> 欢迎您留言</h1>

                    <div class="hidden md:block flex items-center text-center lg:text-left space-x-5">
                        <input type="text" placeholder="Email"
                            class="px-4 py-4 w-96 bg-gray-50 placeholder-gray-400 rounded-xl outline-none">

                        <button
                            class="px-6 py-4 font-semibold bg-gray-50 text-info text-lg rounded-xl hover:bg-blue-500 hover:text-white transition ease-in-out duration-500">Join</button>
                    </div>
                </div>
            </div>

        </div> <!-- container.// -->

    </section>
    <!-- join volunters section //end -->

    <footer class="bg-white py-16">

        <div class="container max-w-screen-xl mx-auto px-4">
            <div class="flex flex-col lg:flex-row lg:justify-between">

                <div class="space-y-7 mb-10 lg:mb-0">
                    <div class="flex justify-center lg:justify-start">
                        <img src="assets/image/footer-logo.png" alt="Image">
                    </div>

                    <div class="font-light text-gray-400 text-md md:text-lg text-center lg:text-left">无论您是想加入我们、需要提供服务、</br>合作或是了解更多都可以联系我们!</div>

                    <div class="flex items-center justify-center lg:justify-start space-x-5">
                        <a href="#"
                            class="px-3 py-3 bg-gray-200 text-gray-700 rounded-full hover:bg-info hover:text-white transition ease-in-out duration-500">
                            <i data-feather="facebook"></i>
                        </a>

                        <a href="#"
                            class="px-3 py-3 bg-gray-200 text-gray-700 rounded-full hover:bg-info hover:text-white transition ease-in-out duration-500">
                            <i data-feather="twitter"></i>
                        </a>

                        <a href="#"
                            class="px-3 py-3 bg-gray-200 text-gray-700 rounded-full hover:bg-info hover:text-white transition ease-in-out duration-500">
                            <i data-feather="linkedin"></i>
                        </a>
                    </div>
                </div>

                <div class="text-center lg:text-left space-y-7 mb-10 lg:mb-0">
                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl">Quick links</h4>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">预约服务</a>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">培训详情</a>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">服务档案</a>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">辅助产品</a>
                </div>

                <div class="text-center lg:text-left space-y-7 mb-10 lg:mb-0">
                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl">Company</h4>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">About
                        Us</a>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">Journalists
                        / Media</a>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">Membership</a>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">Blog</a>
                </div>

                <div class="text-center lg:text-left space-y-7 mb-10 lg:mb-0">
                    <h4 class="font-semibold text-gray-900 text-lg md:text-2xl">Legal</h4>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">FAQ</a>

                    <a href="#"
                        class="block font-light text-gray-400 text-sm md:text-lg hover:text-gray-800 transition ease-in-out duration-300">Terms
                        & Conditions</a>
                </div>

            </div>
        </div> <!-- container.// -->

    </footer>

    <script>
        feather.replace()
    </script>
    <script src="./assets/demo.js"></script>
</body>

</html>